Gallery
Landing Page
Guide

How the two tools fit together

There are two tools, and each has one job. The Gallery Page Writer works out what your page says and how it looks. The Gallery Landing Page Builder takes that, adds your photographs, and turns it into a finished web page.

The file that travels between them is a small .json file. It carries everything: your brief, the sections you picked, the design, and every line of copy. Load it into the Builder and all the fields fill in by themselves.

You can also use the Builder on its own. Fill in the brief there and it writes the copy for you. The Writer is the better route when you care about the words, because it gives you two different approaches to choose from and lets you shape the design first.

Before you start

Open the tools

Save gallery-page-writer.html and gallery-landing-page-builder.html somewhere easy to find, like a folder on your desktop. Double-click either one and it opens in your web browser. Chrome, Safari, Firefox, and Edge all work.

Get an Anthropic API key

1. Go to console.anthropic.com and sign in or create an account.
2. Add a small amount of credit under Billing. The tools use your credit each time Claude writes something.
3. Open API Keys, create a new key, and copy it. It starts with sk-ant-.
4. Paste it into the Anthropic API key box at the top of either tool.

Check Remember on this computer if you want the tool to keep your key so you don't paste it every time. Each tool remembers it separately. On a shared or lab computer, leave the box unchecked, and click Clear key when you're done.

Choose a model

The Model menu picks which version of Claude does the work. Click Update models once you've added your key. The tool asks Anthropic for the current list, so when a new model comes out, it shows up here without you replacing the tool.

After each run, the tools show how many tokens were used. Your Anthropic console shows what that cost in dollars.

The Gallery Page Writer

The Writer runs top to bottom on a single page. Fill it in from the top, then work through the steps below it.

Continue a saved file

The first box is only for coming back to work. Drop a .json file you saved earlier and the brief, sections, design, and copy all reload, ready to edit. Starting fresh? Skip it.

The brief

The brief is where the quality of the copy is decided. Claude can only be as specific as you are. Only two fields are required, the offer and the audience, but every field you fill in makes the page sharper.

Page sections

Check the sections you want on the page. These are the same sections the Builder uses, so what you pick here carries over.

The look

This step shapes both the design and the words. A quiet, spare design gets fewer and shorter sentences; a warmer, busier one can carry more. You can skip it entirely; the Builder will then propose two different looks for you.

The six questions

• The feel, in a few words. The most useful answer here. "Quiet, editorial, lots of white space, like a gallery wall" tells Claude a great deal.
• Light or dark. A dark page suits moody, dramatic work. A light page suits most everything else.
• Colors you want. Describe them, or give hex codes if you have brand colors.
• Type personality. Classic serif, modern high-contrast serif, clean sans-serif, or bold display.
• Buttons. Solid filled, outlined, or underlined text.
• Space between sections and hero photo placement: behind the headline, below it, or beside it.

Anything left on "Let Claude choose" gets picked to fit the rest of your answers.

A design you like

Drop in a screenshot or image of a web page whose look you admire, and Claude studies its palette, type, and spacing. Or drop in a design.md file. If you give both written answers and an image, your written answers win where they disagree. Click Remove reference to take it out.

Read my design

Click Read my design. Claude turns your answers and reference into a set of design settings, with a small sample card on the right showing a headline, body text, a panel, and a button in that style. Change anything you like: colors, fonts, corners, buttons, spacing, hero layout. The sample updates as you go.

• Reset to what Claude read undoes your changes.
• Download as design.md saves the design as its own file, useful for reusing a look on another page.
• Don't use a design clears it, and the Builder will propose two looks instead.

Write two versions

Click Write Two Versions. If you changed the look since you last read it, the Writer reads the design again first. Then both versions are written at the same time, and you can watch them appear in two columns.

Read both all the way through. Then click Use this version under the one you prefer. If you like the headline from one and the FAQ from the other, pick either and paste the parts you want from the other column while editing.

Editing the copy

Your chosen version opens in a set of edit boxes, one per section. Each line starts with a label, and the label tells the Builder where that line goes on the page. Change the words after the label; leave the label alone.

HEADLINE: Book clients who pay what the work is worth
SUBHEAD: A six-week mentorship for portrait photographers.
CTA: Reserve your seat

Lists use a straight bar | between the name and the description. The FAQ uses Q: and A: lines in pairs.

ITEM: Higher rates | Charge what the work is worth without flinching.
QUOTE: Doubled my average sale in two months. | Sarah K., Portland
Q: Are the calls live?
A: Yes. Every Tuesday, and every call is recorded.

To add a benefit or a question, add another line with the same label. To remove one, delete its line. Body text can run over several lines; leave a blank line between paragraphs. The META: line in the Footer box is the one-sentence description search engines and link previews show.

The red Check before you build box lists anything to fix, such as sample testimonials, a missing price, or a buy button with nowhere to go.

Saving for the Builder

• Download for the Builder (.json) saves the file you'll load into the Builder. This is the one you want.
• Copy the JSON copies the same thing to your clipboard.
• Copy as plain text copies the copy alone, section by section, for pasting into an email, a doc, or another site builder.

The Writer also keeps your work in the browser as you go. Close the tab by accident and your brief, design, and chosen copy are there when you reopen it. Your reference image is not kept, so drop it in again if you need it.

The Gallery Landing Page Builder

Loading your file

Drop the .json file from the Writer into Start From a Writer File. The brief, sections, design, and copy all fill in. The Builder uses your finished copy as it is; it does not rewrite it, and building the page costs nothing.

Two options appear once a file is loaded:

• Ignore the loaded copy and write fresh copy from the brief. Check this if you want the Builder to write new copy from the same brief.
• Remove loaded file drops the loaded copy and design but keeps the brief filled in.

No Writer file? Fill in the brief here instead, at minimum the offer and the audience, and the Builder writes one version of the copy for you when you build.

Design file

This box is optional, and you can usually skip it. If your Writer file had a design, it's already loaded.

• A design.md from the Writer is applied exactly as written.
• Other design files, from another tool or written by hand, are read by Claude and turned into colors, fonts, and layout.
• No design at all? Claude proposes two clearly different looks that suit your business.

Your photos

Drag a photo onto any slot, or click the slot to choose a file. Each photo is resized for the web and saved inside the page itself, so there is no separate images folder to keep track of. The slots you see depend on the sections you picked.

Under each photo is a Describe the photo box. Write a short plain description, like "Portrait of a cellist in a dim studio." Search engines read it, and so do people who use screen readers. The Builder reminds you about any photo without one.

The photo slots appear again on the results screen, so you can swap photos after you see the page.

Building and comparing

Click Build My Page. With a Writer file and its design, the page appears right away. If Claude has copy to write or a design to read, you'll see the copy stream in first.

You always get two versions. Switch between them with the tabs above the preview.

Both versions use the same copy. Use the Desktop Tablet Phone buttons to see how the page reads at each size. Most visitors will see it on a phone, so check that view.

Adjusting the page

Design for this version

The design panel controls whichever version is showing. Change the light or dark mode, the five colors, the heading and body fonts, corners, buttons, spacing, and hero layout, and the preview follows along. Each version keeps its own settings.

• Reset this version puts it back the way it was built.
• Download as design.md saves this look as a file you can load into the Writer or Builder for another page.

Edit the copy

The copy boxes work exactly like the Writer's, with the same labels and the same | for lists, and the preview updates a moment after you stop typing. Edits apply to both versions.

Changing sections

Click Back to the brief to change sections or brief details. Your copy and photos are kept. If you turn on a section that has no copy yet, the Builder tells you; type it into its new edit box, or use Rewrite the copy.

Check before you publish

The red box above the preview lists anything that needs attention before the page goes live:

• Sample testimonials that need to be replaced with real ones
• A purchase or booking goal with no checkout link, so the buttons fall back to email
• A checkout link that doesn't start with https://
• No email and no checkout link, so the buttons have nowhere to go
• A missing price in the Offer section
• Sections that have no copy yet
• No hero photo, or a gallery with no photos
• Photos without a description
• Copy that was cut off because Claude ran out of room

When the box is gone, the page is ready.

Downloading and saving

• Download this version saves the version on screen as index.html, your finished page.
• Copy the code copies the same page to your clipboard, for pasting into a site that accepts custom HTML.
• Save project (.json) saves the brief, sections, design, and copy so you can reopen the work later in either tool. Photos are not saved in the project file; they would make it far too large. Keep your photos in a folder so you can drop them back in.

Like the Writer, the Builder keeps your brief and copy in the browser as you work, so a closed tab doesn't cost you anything but the photos.

Putting the page online

Your index.html is a complete web page in a single file, with the words, design, and photos all inside it. Double-click it to check it in your browser first. Then pick one of these:

• Netlify Drop. The fastest free option. Put index.html in a folder by itself, sign in at netlify.com, and drag the folder onto the Drop area. You get a live web address in under a minute, and you can connect your own domain later.
• Your own web host. Upload index.html to your site with your host's file manager or an FTP app. Put it in its own folder, like /mentorship/, to give it its own address.
• A site builder that accepts custom HTML. Use Copy the code and paste it into the custom code block.

To update the page later, open your project file in the Builder, drop the photos back in, make your changes, download again, and replace the old index.html.

Getting better results

• Write the brief like you talk to a client. "Photographers two to five years in who are good with a camera and lost with pricing" gives Claude something to work with. "Photographers" doesn't.
• Give real numbers and real names. "Over 300 photographers mentored" and a quote with a name and a city do more than any adjective.
• Spend your words on the feel. In the look section, the feel line does more than any other answer. Describe a place or a mood, not a style label.
• Use a reference image. A screenshot of a page you admire is often clearer than any description.
• Read both versions out loud. The one that sounds like you on a good day is the one to use.
• Choose photos for their job. The hero sells the feeling. The gallery proves the work. The benefits band and footer set the mood, so quieter images often work better there.
• Edit the headline yourself. Claude's headline is a strong draft. Yours will be better, because you know what your clients actually say.

When something goes wrong